<template>
  <el-container>
    <el-aside width="500px">
      <el-form :model="mysql" label-width="100px">
        <el-form-item
          v-for="(obj, index) in mysql"
          :label="obj.key"
          :key="index"
        >
          <el-input type="textarea" autosize v-model="obj.val"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
        <el-form-item label="输入sql语句">
          <el-input
            type="textarea"
            autosize
            v-model="sqlSentence"
            placeholder="输入sql语句"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sqlExec">执行</el-button>
        </el-form-item>
      </el-form>
    </el-aside>
    <el-aside width="500px">
      <el-form>
        <el-form-item>
          <el-input type="textarea" autosize v-model="content"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">更新</el-button>
        </el-form-item>
      </el-form>
    </el-aside>
    <el-aside width="500px">
      <el-form>
        <el-form-item>
          <el-input type="textarea" autosize v-model="js"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="jsContent">修改Content</el-button>
        </el-form-item>
      </el-form>
    </el-aside>
  </el-container>
</template>

<script>
import { mysqlSelectReq, mysqlUpdateReq, sqlExecReq } from "../api/req";
export default {
  data() {
    let mysql = [];
    mysql.push({
      key: "host",
      val: "10.12.21.4",
    });
    mysql.push({
      key: "port",
      val: "3306",
    });
    mysql.push({
      key: "database",
      val: "lotr_trunk1",
    });
    mysql.push({
      key: "user",
      val: "root",
    });
    mysql.push({
      key: "password",
      val: "test",
    });
    mysql.push({
      key: "table",
      val: "t_user",
    });
    mysql.push({
      key: "id",
      val: "",
    });
    mysql.push({
      key: "uid",
      val: "",
    });
    mysql.push({
      key: "name",
      val: "",
    });
    mysql.push({
      key: "select",
      val: "roleData;buildData",
    });
    return {
      mysql: mysql,
      content: JSON.stringify("hello world"),
      js: "this.content='change content'",
      sqlSentence: "",
    };
  },

  methods: {
    select() {
      let reqObj = {};
      for (let ele of this.mysql) {
        if (!ele.val) continue;
        reqObj[ele.key] = ele.val;
      }
      mysqlSelectReq(reqObj).then((res) => {
        let id = res.id || "";
        let uid = res.uid || "";
        let name = res.name || "";
        for (let ele of this.mysql) {
          if ("id" == ele.key) {
            ele.val = id;
          } else if ("uid" == ele.key) {
            ele.val = uid;
          } else if ("name" == ele.key) {
            ele.val = name;
          }
        }
        res = JSON.stringify(res, null, 2);
        this.content = res;
      });
    },
    update() {
      let reqObj = {};
      for (let ele of this.mysql) {
        if (!ele.val) continue;
        reqObj[ele.key] = ele.val;
      }
      reqObj.content = JSON.parse(this.content);
      mysqlUpdateReq(reqObj).then((res) => {
        this.$message.error(res);
      });
    },
    sqlExec() {
      let reqObj = {};
      for (let ele of this.mysql) {
        if (!ele.val) continue;
        reqObj[ele.key] = ele.val;
      }
      reqObj.sqlSentence = this.sqlSentence;
      sqlExecReq(reqObj).then((res) => {
        let id = res.id || "";
        let uid = res.uid || "";
        let name = res.name || "";
        for (let ele of this.mysql) {
          if ("id" == ele.key) {
            ele.val = id;
          } else if ("uid" == ele.key) {
            ele.val = uid;
          } else if ("name" == ele.key) {
            ele.val = name;
          }
        }
        res = JSON.stringify(res, null, 2);
        this.content = res;
      });
    },
    jsContent() {
      this.content = JSON.parse(this.content);
      if (this.content instanceof Object) {
        eval(this.js);
      } else {
        eval(this.js);
      }
      this.content = JSON.stringify(this.content, null, 2);
    },
  },
};
</script>